<template>
<!-- 分类详情 -->
  <div class="top-detail">
    <project-nav-bar></project-nav-bar>
    <top-banner :topContent="topContent"></top-banner>
    <top-detail-list v-if="topContent" :recommendList="recommendList"></top-detail-list>
    <!-- <h2>哈哈哈{{ this.$route.params.id }}</h2> -->
  </div>
</template>

<script>
import { getTopDetail } from "@/network/topdetail";
import ProjectNavBar from "./children/ProjectNavBar";
import TopBanner from "./children/TopBanner";
import TopDetailList from "./children/TopDetailList";
export default {
  components: {
    ProjectNavBar,
    TopBanner,
    TopDetailList
  },
  data() {
    return {
      topContent: null,
      recommendList: [],
    };
  },
  created() {
    this.getTopDetails();
  },
  methods: {
    getTopDetails() {
      const datas = {
        id: this.$route.params.id,
      };
      getTopDetail(datas).then((res) => {
        console.log(res);
        this.topContent = res.data.content;
        this.recommendList = res.recommendList;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.top-detail {
  height: 100%;
  background-color: #f4f4f4;
}
</style>